<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<view class="userinfo-card">
			<view class="card-box">
				<view class="balance-card-wrap">
					<view class="balance-card">
						<view class="tit">{{$t('bico.W430')}}</view>
						<view class="xia">
							<view class="num">
								<text style="font-size: 6vw;position: absolute;top: 10vw;right: 10vw;left: 6vw;">
									{{myOtc.number}} <text style="font-size: 4vw;margin-left: 2vw;"> USDT</text></text>
							</view>
							<view class="withdraw-btn" @click="funsItemClick(1)">{{$t('bico.W431')}}</view>
						</view>
						<view class="tit" style="font-size: 3.4vw;position: absolute;top: 20vw;right: 10vw;left: 6vw;">
							{{$t('bico.W432')}}
							<text style="margin-left: 2vw;font-size: 4.6vw;">{{back.number}}</text>
							<text style="margin-left: 2vw;"> USDT<text style="margin-left: 2vw;"> </text></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 
		            status状态： 1：全部缴纳 5.已获得承兑商权限 
		            显示=> 可退还保证金 
		        -->


		<!--
		            status状态： 3：押金退还审核中 
		            显示=> 退还保证金审核中 
		        -->

		<view v-if="myOtc.deposit == 1 || myOtc.deposit == 5"
			class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto" @tap="confirm">{{$t('bico.W433')}}</view>
		<view v-if="myOtc.deposit == 3" class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto">{{$t('bico.W434')}}</view>
		<!--<view class="main">
			 <view style="margin-top: 0vw;" :class="['income-card','funs',{'darksss':theme=='dark'}]">
				<u-field 
					v-model="mobile"label="保障金" placeholder="请输入退保 USDT 数量">
				</u-field>
			</view>
			<view :class="['income-card','funs',{'darksss':theme=='dark'}]">
				
				<u-field
					v-model="mobile"label="资金密码"placeholder="请输入资金密码">
				</u-field>
			</view> 
			<view class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto" @tap="confirm">{{$t('login.e_confrim')}}</view>
		</view>-->
	</view>
</template>
<script>
	import {
		domain
	} from '@/common/domain.js'
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {
		bzjMgrPage,
		backBzjDeposit,
		backBzjDepositPage
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		components: {
			uniPopup
		},
		data() {
			return {
				isFinger: "0",
				token: '',
				info: '',
				fingerBool: 0,
				faceBool: 0,
				head: '../../static/rvm.png',
				value: '',
				type: 'text',
				border: true,
				mobile: '',
				code: '',
				myOtc: {},
				back: {}

			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		onShow() {
			this.bzjMgrPage()
			this.backDepositPage()
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('bico.W440'),
			})
			this.$utils.setTheme(this.theme);

		},
		methods: {
			//路由开始
			funsItemClick(index) {
				if (index == 1) {
					uni.switchTab({
										url:'/pages/assets/assets'
									})
				};

			},
			bzjMgrPage() {
				this.$utils.initDataToken({
					url: bzjMgrPage,
					type: 'post'
				}, (res, msg) => {
					console.log(res)
					this.myOtc = res
					uni.setStorageSync('myOtc', res);
				})
			},
			backDepositPage() {
				this.$utils.initDataToken({
					url: backBzjDepositPage,
					type: 'post'
				}, (res, msg) => {
					console.log(res)
					this.back = res
					uni.setStorageSync('myOtc', res);
				})
			},
			confirm() {
				var that =this
				uni.showModal({
					title: this.$t('bico.W435'),
					content: this.$t('bico.W436'),
					showCancel: true,
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					confirmText:this.$t('login.c1'),
					cancelText:this.$t('login.c2'),
					success: function(res) {
						if (res.confirm) {
							// uni.showLoading()
							that.$utils.initDataToken({
								url: backBzjDeposit,
								type: 'post'
							}, (res, msg) => {
								// uni.hideLoading()
								that.$utils.showLayer(this.$t('bico.W437'),);
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							})
							console.log(this.$t('bico.W438'),);
						} else if (res.cancel) {
							console.log(this.$t('bico.W439'),);
						}
					}
				});
			}
			//路由结束
		},
	}
</script>
<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.avatar {

		background: #ffffff0a;
		border-radius: 50%;
		width: 16vw;
		height: 16vw;
		overflow: hidden;
		border: 1vw solid #ffffff14;
		position: relative;
		display: inline-block;
		vertical-align: top;
		text-align: center;
	}

	.container {
		width: 100%;
		height: 100%;

		.userinfo-card {
			.card-box {
				width: 100%;
				height: 17vh;
				position: relative;
				z-index: 0;

				.user-section {
					position: absolute;
					top: 0;
					z-index: 10;
					width: 100%;
					padding: 50upx 30upx 210upx;
					display: flex;

					.avatar-wrap {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						position: relative;
						top: 1.2vw;

						.avatar {
							width: 100%;
							height: 100%;
						}
					}

					.portrait-box {
						margin-left: 18upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info-box {
							font-size: 38upx;

							font-weight: bold;
							color: #333;
						}

						.tuan {
							display: flex;
							align-items: center;

							.ma {
								font-size: 3.6vw;

								font-weight: 600;

							}

							.fuzi {
								width: 64upx;
								height: 34upx;
								background: #CCCCCC;
								border-radius: 15upx;
								font-size: 20upx;

								font-weight: 500;

								text-align: center;
								line-height: 34upx;
								margin-left: 10upx;
							}
						}
					}
				}

				.balance-card-wrap {
					width: 100%;
					height: 15vh;
					padding: 0 20upx;
					position: absolute;
					bottom: 0;
					z-index: 10;

					.balance-card {
						width: 100%;
						height: 15vh;
						background: linear-gradient(135deg, #007AFF 30%, #2946e6 80%);
						background-image: url(../../static/business/tbzjbg.png);
						background-position: 0% 0%;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						border-radius: 20upx;
						padding: 30upx;

						.tit {

							font-weight: bold;
							color: #FFF;
							font-size: 4.2vw;
							position: absolute;
							top: 3vw;
							right: 10vw;
							left: 6vw;
						}

						.xia {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.num {
								font-size: 70upx;

								font-weight: bold;
								color: #FFF;
							}

							.withdraw-btn {
								width: 75px;
								height: 30px;
								line-height: 30px;
								text-align: center;
								background: #243eccad;
								font-size: 12px;

								font-weight: 500;
								color: #FFF;
								border-radius: 2vw;
								position: relative;
								top: 0vw;
							}
						}
					}
				}
			}

		}


		.main {

			.u-field {
				font-size: 14px;
				padding: 20px 0px;
				text-align: left;
				position: relative;
				color: #676767;

			}

			padding: 20upx;

			.income-card {
				width: 100%;
				background-color: #fff;
				border-radius: 1vw;
				padding: 0vw 4vw;
				margin-top: 20upx;

				.tit {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 3.6vw;
					line-height: 32upx;

					font-weight: bold;


					image {
						width: 10upx;
						height: 21upx;
					}
				}

				.show-content {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 40upx;

					.view-category {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.num {
							font-size: 3.6vw;

							font-weight: 600;
							position: relative;
							top: -1vw;

						}

						.funsItemImage {
							position: relative;
							top: -1vw;
							width: 6vw;
							height: 6vw;
							border-radius: 50%;
						}

						.text {
							font-size: 3vw;

							font-weight: 700;

						}
					}

					.line {
						width: 1px;
						height: 65upx;
						background-color: #5559691f;
					}
				}
			}

			.tool-card {
				background-color: #ffffff;
				width: 100%;
				padding: 0 30upx;
				margin-top: 20upx;
				border-radius: 20upx;

				.tool-item {
					display: flex;
					flex-direction: row;
					width: 100%;
					height: 100upx;
					align-items: center;
					justify-content: space-between;

					.view-image-left {
						width: 44upx;
					}

					.item-right {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.view-text {
							margin-left: 0px;
							font-size: 3.4vw;

							font-weight: bold;

						}

						.view-image-right {
							width: 10upx;
							height: 21upx;
						}

						.funsItemImage {
							width: 6vw;
							height: 6vw;
							border-radius: 50%;
						}

					}
				}
			}
		}
	}

	.radius28 {
		border-radius: 2vw;
	}

	.w90 {
		width: 90%;
	}

	.u-border-bottom:after,
	.u-border-left:after,
	.u-border-right:after,
	.u-border-top-bottom:after,
	.u-border-top:after,
	.u-border:after {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		pointer-events: none;
		box-sizing: border-box;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		width: 199.8%;
		height: 199.7%;
		-webkit-transform: scale(0.5, 0.5);
		transform: scale(0.5, 0.5);
		border: 0 solid #e4e7ed36 !important;
		z-index: 2;
	}
</style>
